<template>
	<view>
		<view class="container-top">
			<view class="blank"
				style="height: 60rpx;font-size: 26rpx;color: #6a6a6a;line-height: 60rpx;text-align: center;">
				因收动态变化,可获云豆会适时调整。
			</view>
			<view class="column align-items-center" style="padding: 30rpx 0rpx;">
				<text style="font-size: 30rpx;">云豆收益</text>
				<view class="row align-items-center" style="margin: 20rpx 0rpx;">
					<text style="font-size: 50rpx;color: #00aaff;">{{userInfo.totalPoints +userInfo.redeemPoints}}</text>
					<image src="/static/coins@3x.png" style="width: 30rpx;height: 30rpx;padding: 0rpx 5rpx;" mode="">
					</image>
				</view>
				<!-- <view @click="navTo('/pages/index/make-money/conversion')" class="button">
					去兑换
				</view> -->
			</view>
			<view class="blank">
			</view>
			<view class="task-detail-item" style="font-weight: 800;font-size: 36rpx;margin-top: 30rpx;">
				云豆收益
			</view>
		</view>

		<z-paging :fixed="false" :refresherEnabled="true" :style="`height: ${height}px;`" ref="paging"
			v-model="integralList" @query="queryList" :loadingMoreCustomStyle="{paddingBottom:'30rpx'}">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view v-for="(item,index) in integralList" :key="index" class="row task-detail-item"
				style="margin-top: 0rpx;">
				<view class="column">
					<text style="font-size: 32rpx;">{{integralType[item.type]}}</text>
					<text style="font-size: 26rpx;margin-top: 10rpx;color: #989898;">{{item.createTime}}</text>
				</view>
				<text class="number">+{{item.integral}}</text>
			</view>
		</z-paging>
		<uni-popup ref="popup" type="center">
			<view class="column popup" style="">
				<view class="" style="text-align: center;padding: 20rpx 0rpx;font-size: 50rpx;">
					收益说明
				</view>
				<text>1.你可以通过完成云赚APP的云豆任务来赚取云豆</text>
				<!-- <text>2.你可以通过完成云赚APP的赚钱任务来获得云豆奖励</text> -->
				<!-- <text>3.你可以通过完成云赚APP的赚钱任务来获得云豆奖励</text> -->
				<view @click="$refs.popup.close()" class="global-button" style="margin: 20rpx auto;margin-top: 60rpx;">
					好的
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		IntegralType
	} from "@/common/picker-data.js"
	export default {
		data() {
			return {
				integralType: IntegralType,
				integralList: [],
				userInfo: "",
				content: "",
				height:0
			};
		},
		created() {
			this.$nextTick(() => {
				var query = uni.createSelectorQuery().in(this);
				query.select('.container-top').boundingClientRect();
				query.exec(data => {
					this.height = uni.getSystemInfoSync().windowHeight - data[0].height
				});
			})
		},
		onShow() {
			this.userInfo = this.$api.prePage().userInfo
		},
		methods: {
			dialogConfirm() {
				console.log('拨打电话')
			},
			dialogClose() {},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				console.log(pageNo)
				const params = {
					pageNum: pageNo,
					pageSize: pageSize
				}
				if(pageNo>1){
					console.log("云豆列表",this.integralList)
					params.id = this.integralList[0].id
				}
				this.$util.doGet(`/signIn/getIntegral?pageNum=${pageNo}&pageSize=${pageSize}`, params, {}, true).then(
					res => {
						if (res.data.code = this.$ResponseStatus.OK) {
							this.$refs.paging.complete(res.data.data.list);
						} else {
							this.$refs.paging.complete([]);
						}
						this.firstLoaded = true;
					}).catch(error => {
					console.log(error)
					uni.hideLoading()
				})

			},
		},
		onNavigationBarButtonTap() {
			this.$refs.popup.open()
		}
	}
</script>

<style lang="scss">
	.blank {}

	.popup {
		width: 650rpx;
		padding: 40rpx 30rpx;
		border-radius: 35rpx;
		background-color: #FFFFFF;
		// color: #FFFFFF;
		// text{
		// 	color: #F1F1F1;
		// }
	}

	.task-detail-item {
		align-items: center;
		padding: 20rpx 35rpx;
		align-items: center;
	}

	.number {
		color: #55A3E8;
		font-size: 40rpx;
		margin-left: auto;
	}

	.button {
		padding: 5rpx 50rpx;
		color: #00aaff;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		font-size: 34rpx;
		border: solid 1rpx #1D9FFA;
	}
</style>
